<script lang="ts">
    const { message } = $props();

    let closed = $state(false);

    setTimeout(() => {
        closed = true;
    }, 3000);
</script>

<div
    role="alert"
    class="fixed top-4 mx-auto w-96 rounded-xl border border-gray-100 bg-red-50 p-4"
    class:hidden={closed}
>
    <div class="flex items-start gap-4">
        <span class="text-red-600">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="size-6"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
                />
            </svg>
        </span>

        <div class="flex-1">
            <p class="mt-1 text-sm text-gray-700">
                {message}
            </p>
        </div>

        <button
            class="text-gray-500 transition hover:text-gray-600"
            onclick={() => (closed = true)}
        >
            <span class="sr-only">Dismiss popup</span>

            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="size-6"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18L18 6M6 6l12 12"
                />
            </svg>
        </button>
    </div>
</div>
